<template>
  <div class="w100 foot" v-show="footerFlag" :key="footerFlag+'footer'">
    <van-tabbar
      class="foot-tabber"
      v-model="active"
      active-color="#426F42"
      inactive-color="#000"
      route
    >
      <van-tabbar-item
        :to="{ name: foot.name, params: {...foot.params} }"
        v-for="(foot, i) in foots"
        :icon="foot.vicon"
        :key="i"
        :info="foot.name === 'Shopcart'?cartNum:''"
      >{{ foot.txt }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// import {get} from '@/utils/axios'
import { mapState, mapGetters, mapActions } from 'vuex'
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'
Vue.use(Tabbar).use(TabbarItem)
import { getToken } from '@/utils/getToken'

export default {
  data() {
    return {
      active: 0,
      foots: [
        {
          txt: '首页',
          name: 'Home',
          icon: '&#xe62a',
          vicon: 'home-o'
        },
        {
          txt: '分类',
          name: 'Classify',
          icon: '&#xe778',
          vicon: 'apps-o'
        },
        {
          txt: '购物车',
          name: 'Shopcart',
          icon: '&#xe614',
          vicon: 'shopping-cart-o'
        },
        {
          txt: '我的',
          name: 'User',
          icon: '&#xe60c',
          vicon: 'user-circle-o'
        }
      ]
    }
  },
  computed: {
    ...mapState('footerModule', ['footerFlag']),
    ...mapState('userModule', ['token']),
    ...mapGetters('cartModule', ['cartNum'])
  },
  methods: {
    ...mapActions('cartModule', ['getCartListAction']),
  },
  mounted() {
    if (this.token) {
      this.getCartListAction()
    }
  }
}
// 自带route(默认false)和to实现跳转,不用自己监听active的值
</script>

<style lang='scss' scoped>
.foot-tabber {
  height: 50px;
}
</style>
